<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>核医学设备监控大屏</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@3.2.47/dist/vue.global.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: "Microsoft YaHei", sans-serif;
            background-color: #0f1c30;
            color: #fff;
            overflow: hidden;
        }
        .container {
            display: grid;
            grid-template-columns: 25% 50% 25%;
            grid-template-rows: 15% 70% 15%;
            height: 100vh;
            padding: 10px;
            gap: 10px;
        }
        .header {
            grid-column: 1 / 4;
            background: linear-gradient(90deg, #0f2c52, #0a1c35);
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 20px;
            border: 1px solid #1e3c5a;
        }
        .panel {
            background-color: rgba(16, 31, 50, 0.7);
            border-radius: 6px;
            padding: 15px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
            border: 1px solid #1e3c5a;
            overflow: auto;
        }
        .panel-title {
            font-size: 1.2em;
            margin-bottom: 15px;
            color: #4fc3f7;
            display: flex;
            align-items: center;
        }
        .panel-title::before {
            content: "";
            width: 4px;
            height: 18px;
            background: #4fc3f7;
            margin-right: 8px;
            border-radius: 2px;
        }
        .equipment-status {
            grid-column: 1;
            grid-row: 2;
        }
        .main-display {
            grid-column: 2;
            grid-row: 2;
            display: flex;
            flex-direction: column;
        }
        .stats-panel {
            grid-column: 3;
            grid-row: 2;
        }
        .footer {
            grid-column: 1 / 4;
            grid-row: 3;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
            background: linear-gradient(90deg, #0f2c52, #0a1c35);
            border-radius: 6px;
            border: 1px solid #1e3c5a;
        }
        .status-item {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
        }
        .status-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-right: 10px;
        }
        .status-normal { background-color: #4caf50; }
        .status-warning { background-color: #ffc107; }
        .status-error { background-color: #f44336; }
        .status-maintenance { background-color: #2196f3; }
        .chart-container {
            width: 100%;
            height: 100%;
        }
        .alert-list {
            list-style: none;
            padding: 0;
        }
        .alert-list li {
            padding: 8px;
            margin-bottom: 8px;
            border-left: 3px solid;
            border-radius: 3px;
            background-color: rgba(255, 255, 255, 0.05);
        }
        .alert-warning { border-left-color: #ffc107; }
        .alert-critical { border-left-color: #f44336; }
        .alert-info { border-left-color: #2196f3; }
        .stats-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }
        .stat-card {
            background: rgba(26, 45, 67, 0.7);
            border-radius: 6px;
            padding: 15px;
            text-align: center;
        }
        .stat-value {
            font-size: 2em;
            font-weight: bold;
            margin: 10px 0;
        }
        .stat-label {
            color: #9e9e9e;
            font-size: 0.9em;
        }
    </style>
</head>
<body>
    <div id="app" class="container">
        <div class="header">
            <h1>核医学设备监控中心</h1>
            <div>当前时间: {{ currentTime }}</div>
        </div>
        
        <div class="panel equipment-status">
            <div class="panel-title">设备状态</div>
            <div class="status-item">
                <div class="status-dot status-normal"></div>
                <span>SPECT-CT 01: 正常运行</span>
            </div>
            <div class="status-item">
                <div class="status-dot status-normal"></div>
                <span>PET-CT 01: 正常运行</span>
            </div>
            <div class="status-item">
                <div class="status-dot status-warning"></div>
                <span>伽马相机 01: 需校准</span>
            </div>
            <div class="status-item">
                <div class="status-dot status-maintenance"></div>
                <span>SPECT-CT 02: 计划维护中</span>
            </div>
            
            <div class="panel-title" style="margin-top: 20px;">辐射监测</div>
            <div id="radiation-chart" class="chart-container"></div>
        </div>
        
        <div class="panel main-display">
            <div class="panel-title">设备实时监控 - PET-CT 01</div>
            <div id="equipment-chart" class="chart-container"></div>
        </div>
        
        <div class="panel stats-panel">
            <div class="panel-title">今日统计</div>
            <div class="stats-grid">
                <div class="stat-card">
                    <div class="stat-label">已完成检查</div>
                    <div class="stat-value">24</div>
                </div>
                <div class="stat-card">
                    <div class="stat-label">设备使用率</div>
                    <div class="stat-value">78%</div>
                </div>
                <div class="stat-card">
                    <div class="stat-label">平均检查时间</div>
                    <div class="stat-value">32m</div>
                </div>
                <div class="stat-card">
                    <div class="stat-label">造影剂剩余</div>
                    <div class="stat-value">65%</div>
                </div>
            </div>
            
            <div class="panel-title" style="margin-top: 20px;">报警信息</div>
            <ul class="alert-list">
                <li class="alert-warning">SPECT-CT 02: 冷却系统效率降低</li>
                <li class="alert-info">PET-CT 01: 例行校准提醒 - 今日16:00</li>
                <li class="alert-critical">伽马相机 01: 辐射屏蔽门异常</li>
            </ul>
        </div>
        
        <div class="footer">
            <div>医院核医学科 | 数字孪生监控系统</div>
            <div>系统状态: <span style="color: #4caf50;">正常</span> | 更新于: {{ lastUpdate }}</div>
        </div>
    </div>

    <script>
        const { createApp, ref, onMounted } = Vue;
        
        createApp({
            setup() {
                const currentTime = ref(new Date().toLocaleString('zh-CN'));
                const lastUpdate = ref(new Date().toLocaleTimeString('zh-CN'));
                
                // 更新时间
                setInterval(() => {
                    currentTime.value = new Date().toLocaleString('zh-CN');
                }, 1000);
                
                onMounted(() => {
                    // 初始化辐射监测图表
                    const radiationChart = echarts.init(document.getElementById('radiation-chart'));
                    const radiationOption = {
                        tooltip: { trigger: 'axis' },
                        radar: {
                            indicator: [
                                { name: '控制室', max: 100 },
                                { name: '扫描室', max: 100 },
                                { name: '注射室', max: 100 },
                                { name: '候诊区', max: 100 },
                                { name: '废物处理', max: 100 }
                            ]
                        },
                        series: [{
                            type: 'radar',
                            data: [{ value: [12, 35, 28, 5, 42], name: '辐射水平(μSv/h)' }],
                            areaStyle: { color: 'rgba(79, 195, 247, 0.3)' }
                        }]
                    };
                    radiationChart.setOption(radiationOption);
                    
                    // 初始化设备监控图表
                    const equipmentChart = echarts.init(document.getElementById('equipment-chart'));
                    const equipmentOption = {
                        tooltip: { trigger: 'axis' },
                        legend: { data: ['CPU负载', '内存使用', '温度'], textStyle: { color: '#fff' } },
                        grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
                        xAxis: {
                            type: 'category',
                            data: ['09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00'],
                            axisLine: { lineStyle: { color: '#546e7a' } }
                        },
                        yAxis: {
                            type: 'value',
                            axisLine: { lineStyle: { color: '#546e7a' } },
                            splitLine: { lineStyle: { color: 'rgba(84, 110, 122, 0.3)' } }
                        },
                        series: [
                            {
                                name: 'CPU负载',
                                type: 'line',
                                data: [45, 32, 48, 40, 55, 68, 60],
                                smooth: true,
                                lineStyle: { color: '#4fc3f7' }
                            },
                            {
                                name: '内存使用',
                                type: 'line',
                                data: [65, 58, 62, 69, 75, 72, 68],
                                smooth: true,
                                lineStyle: { color: '#4caf50' }
                            },
                            {
                                name: '温度',
                                type: 'line',
                                data: [32, 35, 38, 36, 37, 40, 42],
                                smooth: true,
                                lineStyle: { color: '#ff9800' }
                            }
                        ]
                    };
                    equipmentChart.setOption(equipmentOption);
                    
                    // 响应窗口大小变化
                    window.addEventListener('resize', function() {
                        radiationChart.resize();
                        equipmentChart.resize();
                    });
                });
                
                return {
                    currentTime,
                    lastUpdate
                };
            }
        }).mount('#app');
    </script>
</body>
</html>